<template>
  <div class="data-center-overview">
    <div class="time-filter">
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        :shortcuts="dateShortcuts"
        format="YYYY/MM/DD"
        value-format="x"
        @change="handleDateChange"
        size="default"
      />
    </div>

    <div class="overview-cards">
      <StatsCards ref="statsCardsRef" :stats-data="statsData" />
    </div>

    <div class="overview-charts">
      <el-row :gutter="20" style="margin-top: 20px">
        <el-col :span="12">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>订单销售人员统计</span>
                <Segmented
                  v-model="defaultState"
                  :options="optionsBasis"
                  @change="salesmanChange"
                />
              </div>
            </template>
            <div class="chart-container">
              <SalesPersonChartPie :data="salesData" />
            </div>
          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>销售单位饼状统计</span>
                <Segmented
                  v-model="defaultState"
                  :options="optionsBasis"
                  @change="purchasingUnitChange"
                />
              </div>
            </template>
            <div class="chart-container">
              <SalesUnitChartPie :data="salesUnitData" />
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-top: 20px">
        <el-col :span="12">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>销售品牌统计</span>
                <Segmented
                  v-model="defaultState"
                  :options="optionsBasis"
                  @change="brandStateChange"
                />
              </div>
            </template>
            <div class="chart-container">
              <SalesBrandChartPie :data="salesBrandData" />
            </div>
          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>供货商统计</span>
                <Segmented
                  v-model="defaultState"
                  :options="optionsBasis"
                  @change="supplierStateChange"
                />
              </div>
            </template>
            <div class="chart-container">
              <SupplierChartPie :data="supplierData" />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import Segmented, { type OptionsType } from "@/components/ReSegmented";
import dayjs from "dayjs";
import SalesPersonChartPie from "./components/SalesPersonChartPie.vue";
import SalesUnitChartPie from "./components/SalesUnitChartPie.vue";
import SalesBrandChartPie from "./components/SalesBrandChartPie.vue";
import SupplierChartPie from "./components/SupplierChartPie.vue";
import StatsCards from "./components/StatsCards.vue";

import {
  getBrandDistribution,
  getBrandOrderAmountDistribution,
  getPurchaseUnitData,
  getPurchaseUnitOrderAmountDistribution,
  getSalesmanData,
  getSalesmanOrderAmountDistribution,
  getStatsData,
  getSupplierData,
  getSupplierOrderAmountDistribution
} from "@/api/datacenter";
// 日期范围选择 - 默认为今天零时零分至今天23时59分59秒
const today = dayjs();
const firstDay = today.startOf("month");
const monthEnd = today.endOf("day");
const dateRange = ref<[number, number] | null>([
  firstDay.valueOf(),
  monthEnd.valueOf()
]);

// 日期快捷选项
const dateShortcuts = [
  {
    text: "今天",
    value: () => {
      const today = dayjs();
      const todayStart = today.startOf("day");
      const todayEnd = today.endOf("day");
      return [todayStart.valueOf(), todayEnd.valueOf()];
    }
  },
  {
    text: "昨日",
    value: () => {
      const yesterday = dayjs().subtract(1, "day");
      const yesterdayStart = yesterday.startOf("day");
      const yesterdayEnd = yesterday.endOf("day");
      return [yesterdayStart.valueOf(), yesterdayEnd.valueOf()];
    }
  },
  {
    text: "本周",
    value: () => {
      const today = dayjs();
      // 设置每周的第一天为周一
      const monday = today.startOf("week").add(1, "day");
      // 如果今天是周日，则monday应该是上周的周一
      if (today.day() === 0) {
        monday.subtract(7, "day");
      }
      const weekEnd = today.endOf("day");
      return [monday.valueOf(), weekEnd.valueOf()];
    }
  },
  {
    text: "本月",
    value: () => {
      const today = dayjs();
      const firstDay = today.startOf("month");
      const monthEnd = today.endOf("day");
      return [firstDay.valueOf(), monthEnd.valueOf()];
    }
  }
];

const statsData = ref({
  orderCount: { current: 3642, previous: 3160 },
  orderAmount: { current: 1580000, previous: 1730000 },
  purchaseAmount: { current: 892456, previous: 675400 },
  paymentAmount: { current: 1234567, previous: 1303000 }
});

// StatsCards组件引用
const statsCardsRef = ref<InstanceType<typeof StatsCards>>();

// 销售人员数据
const salesData = ref([
  { name: "张三", value: 156 },
  { name: "李四", value: 128 },
  { name: "王五", value: 98 },
  { name: "赵六", value: 87 },
  { name: "陈七", value: 65 },
  { name: "刘八", value: 45 }
]);

// 销售单位数据
const salesUnitData = ref([
  { name: "销售一部", value: 245 },
  { name: "销售二部", value: 189 },
  { name: "销售三部", value: 156 },
  { name: "销售四部", value: 134 },
  { name: "销售五部", value: 98 },
  { name: "销售六部", value: 76 }
]);

// 销售品牌数据
const salesBrandData = ref([
  { name: "品牌A", value: 320 },
  { name: "品牌B", value: 280 },
  { name: "品牌C", value: 195 },
  { name: "品牌D", value: 142 },
  { name: "品牌E", value: 98 },
  { name: "品牌F", value: 67 }
]);

// 供货商数据
const supplierData = ref([
  { name: "供货商A", value: 286 },
  { name: "供货商B", value: 234 },
  { name: "供货商C", value: 198 },
  { name: "供货商D", value: 167 },
  { name: "供货商E", value: 125 },
  { name: "供货商F", value: 89 }
]);

let defaultState = ref("quantity");
const optionsBasis = [
  { label: "数量", value: "quantity" },
  { label: "金额", value: "amount" }
];

// 日期选择处理函数
const handleDateChange = (val: [number, number] | null) => {
  defaultState.value = "quantity";
  handlerQueryData(val);
};

const handlerQueryData = (val: [number, number] | null) => {
  getStatsData([val[0], val[1]]).then(res => {
    console.log(res);
    statsData.value = res.data;
  });
  getSalesmanData([val[0], val[1]]).then(res => {
    console.log(res);
    salesData.value = res.data;
  });
  getPurchaseUnitData([val[0], val[1]]).then(res => {
    console.log(res);
    salesUnitData.value = res.data;
  });
  getBrandDistribution([val[0], val[1]]).then(res => {
    console.log(res);
    salesBrandData.value = res.data;
  });
  getSupplierData([val[0], val[1]]).then(res => {
    console.log(res);
    supplierData.value = res.data;
  });
};

const salesmanChange = (val: any) => {
  console.log(val.index);
  if (val.index) {
    console.log("金额");
    getSalesmanOrderAmountDistribution(dateRange.value).then(res => {
      salesData.value = res.data;
    });
  } else {
    console.log("数量");
    getSalesmanData(dateRange.value).then(res => {
      salesData.value = res.data;
    });
  }
};
const purchasingUnitChange = (val: any) => {
  console.log(val.index);
  if (val.index) {
    console.log("金额");
    getPurchaseUnitOrderAmountDistribution(dateRange.value).then(res => {
      salesUnitData.value = res.data;
    });
  } else {
    console.log("数量");
    getPurchaseUnitData(dateRange.value).then(res => {
      salesUnitData.value = res.data;
    });
  }
};
const brandStateChange = (val: any) => {
  console.log(val.index);
  if (val.index) {
    console.log("金额");
    getBrandOrderAmountDistribution(dateRange.value).then(res => {
      salesBrandData.value = res.data;
    });
  } else {
    console.log("数量");
    getBrandDistribution(dateRange.value).then(res => {
      salesBrandData.value = res.data;
    });
  }
};
const supplierStateChange = (val: any) => {
  console.log(val.index);
  if (val.index) {
    console.log("金额");
    getSupplierOrderAmountDistribution(dateRange.value).then(res => {
      supplierData.value = res.data;
    });
  } else {
    console.log("数量");
    getSupplierData(dateRange.value).then(res => {
      supplierData.value = res.data;
    });
  }
};
onMounted(() => {
  // 组件已自行加载数据
  handlerQueryData(dateRange.value);
});
</script>

<style scoped>
.data-center-overview {
  padding: 20px;
}

.overview-header {
  margin-bottom: 24px;
}

.overview-header h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.overview-header p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.time-filter {
  margin-bottom: 24px;
  display: flex;
  justify-content: flex-start;
}

.overview-cards {
  margin-bottom: 24px;
}

.chart-container {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-placeholder {
  color: #909399;
  font-size: 16px;
  background: #f5f7fa;
  padding: 40px;
  border-radius: 4px;
  border: 2px dashed #dcdfe6;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
